<template>
  <div>
    <div class="goods">
      <ul>
        <li v-for="(item,index) in hotLists" :key="index">
          <figure
            class="m-img ml fl pr"
            @click="playMovieVideo(item.preview[0].iphoneUrl, `https://gw.alicdn.com/${item.poster}`)"
          >
            <img :src="`https://gw.alicdn.com/${item.poster}`" />
            <div class="play-icon pa">
              <img src="https://gw.alicdn.com/tps/TB1PH2uLXXXXXaLaXXXXXXXXXXX-60-60.png" alt />
            </div>
          </figure>
          <div class="goods_right fr">
            <button class="goods_buy" v-if="item.openTime<'2016-12-09'">购买</button>
            <button class="goods_Presale" v-else>预售</button>
          </div>
          <router-link :to="{ name: 'detail', params: { id: index }}">
            <div class="goods_cnt">
              <div>
                <h4>{{item.showName}}</h4>
              </div>
              <div>
                <span class="star">
                  <img src="../../assets/images/star.svg" alt />
                </span>
                <span class="star_com">{{item.remark}}</span>
              </div>
              <p>{{item.highlight}}</p>
              <p class="actor">{{item.leadingRole}}</p>
            </div>
          </router-link>
          <div class="goods_btm">
            <span>1212五折狂欢</span>
            <span>1212特惠抢票，名额有限抢完即止</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  props: {
    hotLists: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    ...mapMutations(["playVideo"]),
    playMovieVideo(url, cover) {
      this.playVideo({
        audio: {
          url,
          cover
        }
      });
    }
  }
};
</script>

<style>
.goods {
  background-color: #fff;
  padding-left: 15px;
}
.goods li {
  padding-top: 15px;
  border-top: 1px solid #d9d9d9;
}
.goods h4 {
  color: black;
}
.goods_right button {
  font-size: 12px;
  border-radius: 3px;
  padding: 3px 8px;
  background-color: #fff;
  margin-top: 20px;
  margin-right: 15px;
  font-weight: 700;
}
.goods_right .goods_buy {
  border: 1px solid #ff4d64;
  color: #ff4d64;
}
.goods_right .goods_Presale {
  border: 1px solid #37b7ff;
  color: #37b7ff;
}
.goods_cnt {
  margin-left: 75px;
  margin-right: 50px;
  padding-bottom: 20px;
}
.goods_cnt .star span {
  height: 10px;
  font-size: 10px;
  color: #9c9c9c;
}
.goods_cnt p {
  margin-top: 12px;
  font-size: 12px;
  color: #9c9c9c;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.goods_cnt .actor {
  margin-top: 6px;
}
.goods_btm {
  margin-left: 75px;
  font-size: 12px;
  padding-right: 15px;
  padding-bottom: 8px;
  padding-top: 8px;
  border-top: 1px solid #d9d9d9;
}
.goods_btm span {
  display: block;
  box-sizing: border-box;
  width: 50%;
}
.goods_btm span:first-child {
  color: #fea54c;
  border-right: 0px;
  position: relative;
  float: left;
}
.goods_btm span:last-child {
  color: #9c9c9c;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-indent: 8px;
  border-left: 1px solid #d9d9d9;
}

.star img {
  width: 50px;
}
.star_com {
  font-size: 10px;
  color: #9c9c9c;
}
.m-img {
  width: 65px;
  height: 90px;
}
.play-icon {
  width: 17px;
  height: 17px;
  left: 50%;
  top: 50%;
  margin-left: -8.5px;
  margin-top: -8.5px;
  opacity: 0.7;
}
.m-img img,
.play-icon img {
  width: 100%;
  height: 100%;
}
</style>
